<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <input type="text" id="text">
    </div>
    <script>
        const box=document.getElementById('box');
        const textInput=document.getElementById('text');
        textInput.addEventListener('click',function(){
            console.log('input clicked')
        },true);// true 捕获阶段去响应事件 false 冒泡阶段 由内向外
        box.addEventListener('click',function(){
            console.log('box clicked')
        },true);
        // textInput.onclick=function(e){
        //     console.log('onclick');
        // }
        textInput.onfocus=function(e){
            console.log('onfocus');
        }
        textInput.onmousedown=function(e){
            console.log('onmousedown');
        }
        textInput.onmouseenter=function(e){
            console.log('onmouseenter');
        }
    </script>
</body>
</html>